<script lang="ts">
import type { DefineComponent } from "vue";
import {computed, defineComponent, inject, watch} from "vue";
import type { SideConfig } from "@/components/DesignerLayout/LeftSide/sideConfig";
import { WIDGET_PREFIX, widgetMap } from "@/components/x6/register";
import type { VueShape } from "@antv/x6-vue-shape";
import store from "@/store";

export default defineComponent({
  name: "X6DyanmicWidget",
  components: {
    ...widgetMap,
  },
  directives: {
    color: {
      bind: (el, binding, vnode, oldVnode) => {
      },
      componentUpdated: (el, binding, vnode, oldVnode) => {
        const bool = binding.value.testBool
        const bg = bool ? 'unset' : 'red'
        el.style.background = bg;
      }
    }
  },
  setup() {
    const getNode = inject("getNode") as () => VueShape;
    function getRender(): DefineComponent {
      const bindDataConfig = getNode().data.sideConfig as unknown as SideConfig;
      const key = `${WIDGET_PREFIX}${bindDataConfig.type}`;
      return widgetMap[key] || null;
    }
    const Render = getRender();

    const storeWidgetMap = computed(() => {
      return (store.state as any).widget.widgetMap;
    });

    const testBool = computed(() => {
      return (store.state as any).test.testBool
    })

    watch(testBool, (value) => {
      console.log(value)
    }, { immediate: true })

    return {
      Render,
      testBool
    };
  },
  // render(
  //   createElement: CreateElement
  // ): VNode | VNode[] {
  //   const getNode = inject("getNode") as () => VueShape;
  //   console.log(getNode());
  //   function getRender() {
  //     const bindDataConfig = getNode().data.sideConfig as unknown as SideConfig;
  //     const key = `${WIDGET_PREFIX}${bindDataConfig.type}`;
  //     return widgetMap[key] || null;
  //   }
  //   const Render = getRender();
  //   return Render
  //     ? createElement(Render) as VNode
  //     : createElement("span", "未获取到组件") as VNode;
  // },
});
</script>

<template>
  <div class="x6-render">
    <span v-if="!Render">未获取到组件</span>
    <component v-else :is="Render" v-color="{ testBool }"/>
  </div>
</template>
<style scoped lang="less">
.x6-render {
  width: 100%;
  height: 100%;
}
</style>
